<template>
  <component
    :is="iconComponent"
    v-if="iconComponent"
    :class="['svg-icon', svgClass]"
    :style="{ width: size + 'px', height: size + 'px', color }"
  />
  <span v-else style="color: red;">找不到图标{{  iconComponent}}</span>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  name: string // 只写文件名或带子目录，如 'manage/icon_xxx'
  size?: number
  color?: string
  svgClass?: string
}>()

// 动态导入所有 svg
const modules = import.meta.glob('~/assets/svg/**/*.svg', { eager: true })

const iconComponent = computed(() => {
  const key = `/assets/svg/${props.name}.svg`
  return (modules[key] as { default: any })?.default || null
})
</script>

<style scoped>
.svg-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  fill: currentColor;
}
</style>